<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20210902124邵文杰</title>
    <script src="node_modules\vue\dist\vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>图书列表</h3>
        <table border="1">
            <tr>
                <th>序号</th>
                <th>图书名称</th>
                <th>出版社</th>
                <th>价格</th>
            </tr>
            <template v-for="book in books">
                <tr>
                    <td>{{ book.id }}</td>
                    <td>{{ book.name }}</td> 
                    <td>{{ book.publisher }}</td>
                    <td>{{ book.price }}</td>
                </tr>
            </template>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                books: [
                    { id: 1, name: 'HTML5+CSS3移动Web开发实战', publisher: '人民邮电出版社', price: 58 },
                    { id: 2, name: '零基础学Python（全彩版）', publisher: '吉林大学出版社', price: 79.8 },
                    { id: 3, name: '数学之美', publisher: '人民邮电出版社', price: 49 }
                ]
            }
        });
    </script>
</body>

</html>